<template>
	<div>
<div class="loginBox">
            <div class="loginBg"></div>
            <div  class="signin">
                <div class="loginHtml">
                    <h1 class="loginTitle">系统登录</h1>
                    <el-form :model="kefuForm"  :rules="rules" ref="kefuForm">
                        <el-form-item  prop="username">
                            <el-input v-model="kefuForm.username" placeholder="账号"></el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <el-input show-password v-on:keyup.enter.native="kefuLogin('kefuForm')" v-model="kefuForm.password" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%" :loading="loading" @click="kefuLogin('kefuForm','pc')">登录</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="clear"></div>
                </div>
                <p class="copyright"> </p>
            </div>
        </div>
	</div>
</template>

<script>
	import axios from 'axios'
	import loadJs from '../tools/load.js'
	import localStorage from '../tools/localStorage.js'
	
	export default {
	  name: 'Login',
		data() {
		  return {
			kefuForm: {
				username:"",
				password:"",
			},
			rules: {},
			loading:false,
		  }
		},
		methods: {
		  kefuLogin() {
			var _this=this;
			this.loading=true;
			axios.post(this.ApiHost+'/check', {
				username: this.kefuForm.username,      
				password: this.kefuForm.password
			  })
			  .then(function (response) {
				  _this.loading=false;
				  console.log(response);
				  var code=response.data.code;
				  var msg=response.data.msg;
				  if(code!=200){
					  _this.$message({
						  message: msg,
						  type: 'error'
					  });
					  return;
				  }
				  _this.$message({
					  message: msg,
					  type: 'success'
				  });
				  var token=response.data.result.token;
				  localStorage.setFakeCookie("token",token,3600*24);
				  _this.$router.replace("/main/onlineVisitor");
				  setTimeout(function () {
					window.location.reload();
				  }, 60);
				  //window.location.href='/#/main/onlineVisitor';	
			  })
			  .catch(function (error) {
				  _this.loading=false;
				  console.log(error);
				  _this.$message({
					  message: error.message,
					  type: 'error'
				  });
			  });
		  }
		},
		created() {

		},
		mounted: function () {
			// loadJs('https://gofly.v1kf.com/static/js/kefu-front.js').then(()=>{
			// 	KEFU.init({
			// 		KEFU_URL:"https://gofly.v1kf.com",
			// 		KEFU_KEFU_ID: "taoshihan",
			// 		KEFU_ENT: "5",
			// 		KEFU_LANG:"cn",
			// 		KEFU_SHOW_TYPES:1,
			// 		KEFU_AUTO_OPEN:false,
			// 	})
			// });
			    (function(a, b, c, d) {
			        let h = b.getElementsByTagName('head')[0];let s = b.createElement('script');
			        s.type = 'text/javascript';s.src = c+"/static/js/kefu-front.js";s.onload = s.onreadystatechange = function () {
			            if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") d(c);
			        };h.appendChild(s);
			    })(window, document,"https://gofly.v1kf.com",function(u){
			        KEFU.init({
			            KEFU_URL:u,
			            KEFU_KEFU_ID: "taoshihan",
			            KEFU_ENT: "5",
			        })
			    });
		}
	}
</script>

<style>
	body {
		margin: 0;
		padding: 0;
	}
	.loginBg{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0.5;
		z-index: 0;
	}
	.loginBox{
		width: 100%;
		height: 100%;
		background: url("/static/images/loginBg.jpg") no-repeat;
		background-size: cover;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.clear{clear: both;}
	.signin {
		width: 460px;
		padding: 25px;
		background: #fff;
		box-shadow: 0 25px 30px -13px rgba(40,40,40,.4);
		border-radius: 6px;
		z-index: 1;
	}
	.signin h1,.signin h2,.signin .copyright{
		font-weight: normal;
		color: #4d627b;
		text-align: center;
	}
	.signin .loginTitle{
		font-size: 24px;
		margin: 15px 0px;
	}
	.signin .loginDesc{
		font-size: 14px;
		margin-bottom: 15px;
	}
	.signin .loginDesc .regBtn{
		float: left;
	}
	.signin .loginDesc a{
		text-decoration: none;
		cursor: pointer;
		color: #409EFF;
	}
	.signin .copyright{
		font-size: 12px;
	}
	@media (max-width: 768px) {
		body{
			background-color: #fff;
		}
		.signin{
			width: 80%;
			background-color: #fff;
			box-shadow:none;
		}
	}
</style>